<template>
  <div id="tag-view">
    <div
      :class="{ active: $store.state.tagAct == index }"
      v-for="(item, index) in $store.state.tagViewList"
      :key="index"
      @click.stop="$router.push($store.state.tagViewPathList[index])"
    >
      {{ item }}
      <!-- <span style="color:#000" @click.prevent="fn(index)">x</span> -->
      <i v-show="$store.state.tagAct == index" class="el-icon-close" @click.stop="fn(index)"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    fn(index){
      if(index==0){
        alert("首页无法删除")
      }else{
        this.$store.state.tagViewList.splice(index,1);
        this.$store.state.tagAct-- ;
        console.log("@",this.$store.state.tagViewPathList)
        this.$store.state.tagViewPathList.splice(index,1)
        console.log(this.$store.state.tagViewPathList)
        this.$router.push(this.$store.state.tagViewPathList[index-1])
        // this.$router.push("/count")
      }
      
    }
  }
};
</script>

<style scoped>
#tag-view {
  height: 34px;
  width: calc(100%-20px);
  border-top: 1px solid rgba(163, 162, 162, 0.1);
  display: flex;
  align-items: center;
  padding-left: 20px;
}
#tag-view > div {
  /* width:30px; */
  width: max-content;
  height: 25px;
  margin-right: 10px;
  padding: 0px 10px;
  border: 1px solid #d8dce5;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 25px;
}
#tag-view > div:hover,
.active {
  color: #fff;
  background: #42b983 !important;
}
</style>